<template>
  <view class="main">
    <view class="top">
      <u-button v-if="!userInfo" @click="loginFn" size="medium" type="success"
        >去登录</u-button
      >
      <view v-else>
        <view
          class="user_info"
          :style="`background-image: url(${userInfo.avatarUrl});background-size: 100%; `"
        >
        </view>
        <u-image
          shape="circle"
          height="172"
          width="172"
          :src="userInfo.avatarUrl"
        ></u-image>
      </view>
    </view>
    <view class="oederInfo">
      <view class="icon">
        <view class="iconfont icon-daifukuan"></view>
        <view>待付款</view>
      </view>
      <view class="icon">
        <view class="iconfont icon-daishouhuo"></view>
        <view>待收货</view>
      </view>
      <view class="icon">
        <view class="iconfont icon-tuihuo"></view>
        <view>退货</view>
      </view>
      <view class="icon">
        <view class="iconfont icon-quanbudingdan01"></view>
        <view>订单</view>
      </view>
    </view>
    <view class="feedback">
      <view class="cell">
        <view class="info">
          <u-icon size="45" name="kefu-ermai"></u-icon>
          <view>联系客服</view>
        </view>
        <view>400-888-000</view>
      </view>
      <view class="cell">
        <view class="info">
          <u-icon size="45" name="file-text"></u-icon>
          <view>意见反馈</view>
        </view>
        <view></view>
      </view>
      <view class="cell">
        <view class="info">
          <u-icon size="45" name="info-circle"></u-icon>
          <view>当前版本</view>
        </view>
        <view>v.1.23</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
    };
  },

  methods: {
    async loginFn() {
      const [err, res] = await uni.getUserProfile({ desc: "获取用户头像" });
      console.log(res);
      this.userInfo = res.userInfo;
    },
  },
};
</script>

<style lang="scss">
.main {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
    overflow: hidden;
    .user_info {
      background-repeat: no-repeat;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -o-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
    }
  }
  .oederInfo {
    height: 144rpx;
    display: flex;
    margin: 0 10rpx;
    padding: 0 10rpx;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 15rpx;
    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 60rpx;
        line-height: 80rpx;
      }
    }
  }
  .feedback {
    height: 40vh;
    margin: 10rpx;
    padding-top: 10rpx;
    background-color: #fff;
    border-radius: 15rpx;
    .cell {
      display: flex;
      height: 100rpx;
      padding: 0 20rpx;
      margin: 0 10rpx;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .info {
        display: flex;
        align-items: center;
        view {
          margin-left: 20rpx;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>